<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" :src='loginImage.image1'></image>
		<image class="img-b" :src='loginImage.image2'></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">{{content}}</view>
		<form class="cl">
			<view class="t-a">
				<image :src='loginImage.imagesj'></image>
				<view class="line"></view>
				<input type="text" name="Name" placeholder="请输入账号" maxlength="20" v-model="loginData.Name" />
			</view>
			<view class="t-a">
				<image :src='loginImage.imageyz'></image>
				<view class="line"></view>
				<input type="password" name="Password" maxlength="15" placeholder="请输入密码" v-model="loginData.Password" />
			</view>
			<button class="loginButton" @tap="login()">登 录</button>
			<button class="wxloginButton"  @tap="wxLogin()">一键登录</button>
			<button v-if="showFaceButton" class="wxloginButton"  @tap="faceLogin()">扫脸登录</button>
			<!-- <button class="wxloginButton"  @tap="faseLogin()">人脸登录</button> -->
		</form>
		
		
		<view v-if="showFaceButton" @click="faceBuind()" class="t-b-saomax">人脸绑定</view>
	</view>
</template>
<script>
import request from '@/common/request.js';
import QQMapWX from "@/common/qqmap-wx-jssdk";
export default {
	data() {
		return {
			showFaceButton:false,
			title: this.$request22.projectName,
			content: this.$request22.projectDesc,
			loginData:{
				Name: '', //账号
				Password: '', //密码
				code:'',
				avatarUrl:''
			},
			loginImage:{
				image1:this.$request22.baseUrl1+'/Resource/sg/login/2.png',
				image2:this.$request22.baseUrl1+'/Resource/sg/login/3.png',
				imagesj:this.$request22.baseUrl1+'/Resource/sg/login/sj.png',
				imageyz:this.$request22.baseUrl1+'/Resource/sg/login/yz.png',
			},
			session_key:''
		};
	},
	monted(){
		document.querySelector('.uni-page-head-hd').style.display = 'none'
	},
	onLoad(option) {
		let that=this;
		
		that.checkAutoScan(option.id)
		
		if(option.me!=undefined&&option.me!=null&&option.me!=''){
			if(option.me!=1){
				that.wxLogin();
			}
		}else{
			that.wxLogin();
		}
		that.getSessionKey();
		that.getLoginConfig();
	},
	methods: {
		getLoginConfig() {
			var that = this;
			let opts = {
				url: 'SpareApi/getLoginConfig',
				method: 'get'
			};
			request.httpRequest(opts).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					that.showFaceButton=res.data.data
				}
				else{
					that.showFaceButton=false
				}
			});
		},
		faceBuind(){
			uni.navigateTo({
				url: '/pages-others/face/bindFace'
			})
		},
		faceLogin(){
			uni.navigateTo({
				url: '/pages-others/face/faceRecognition'
			})
		},
		getSessionKey(){
			let that=this
			//再拿一次code
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					
					let data={
						code:loginRes.code
					}
					let opts = {
						url: 'api/GetSessionKeyByCode',
						method: 'get'
					};
					request.httpRequest(opts,data).then(res => {
						console.log(res)
						that.session_key=res.data.msg
					});
				},fail() {
					//直接去用按钮登陆
					uni.showToast({ title: '获取授权失败(301)', icon: 'none',duration:3000 });
					return;
				}
			});
		},
		checkAutoScan(id){
			if(id!=null&&id!=''&&id!=undefined){
				console.log('id:'+id)
				uni.setStorage({
					key:'auto_qrcodeid',
					data:{id:id},
					success() {
					}
				})
			}
		},
		wxLogin(){
			var that = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.loginData.code=loginRes.code
					that.loginByCode();
				},fail() { 
					//直接去用按钮登陆
					uni.showToast({ title: '获取授权失败(301)', icon: 'none',duration:3000 });
				}
			});
		},
		//openid登陆
		loginByCode() {
			var that = this;
			let opts = {
				url: 'api/UserLoginByOpenId',
				method: 'post'
			};
			uni.showLoading({
				title: '登陆中'
			})
			request.httpRequest(opts,that.loginData).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					uni.setStorage({
						key:'userdata',
						data:res.data.data,
						success() {
							uni.showToast({ title: '跳转中...', icon: '/static/success.png' });
							let PageCur='index';
							uni.getStorage({
								key: 'PageCur',
								success: function (PageCurRes) {
									PageCur=PageCurRes.data
								}
							})
							setTimeout(() => {
								 uni.reLaunch({
									url: '/pages/index/tabbar?PageCur='+PageCur+'&qrcodeid='+that.qrcodeid
								 });
							}, 0)
						}
					})
				}
				else{
					uni.hideLoading();
					if(res.data.code == 267){
						uni.showToast({ title: '账号审核中...', icon: 'error' ,duration:1500 });
						setTimeout(() => {
							 uni.reLaunch({
							 	url: '/pages-others/verifyUserForm'
							 })
						}, 2000)
					}else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				}
			});
			
			
		},
		//手动登录
		login() {
			var that = this;
			if (!that.loginData.Name) {
				uni.showToast({ title: '请输入账号', icon: 'none' , duration: 3000});
				return;
			}
			if (!that.loginData.Password) {
				uni.showToast({ title: '请输入密码', icon: 'none', duration: 3000 });
				return;
			}
			let opts = {
				url: 'api/Login',
				method: 'post'
			};
			uni.showLoading({
				title: '登陆中'
			})
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes.code)
					that.loginData.code=loginRes.code
					request.httpRequest(opts,that.loginData).then(res => {
						uni.hideLoading();
						if(res.data.code == 1){
							uni.setStorage({
								key:'userdata',
								data:res.data.data,
								success() {
									uni.showToast({ title: '跳转中...', icon: '/static/success.png' });
									let PageCur='index';
									uni.getStorage({
										key: 'PageCur',
										success: function (PageCurRes) {
											PageCur=PageCurRes.data
										}
									})
									setTimeout(() => {
										 uni.reLaunch({
											url: '/pages/index/tabbar?PageCur='+PageCur+'&qrcodeid='+that.qrcodeid
										 });
									}, 0)
								}
							})
						}
						else{
							uni.hideLoading();
							if(res.data.code == 267){
								uni.showToast({ title: '账号审核中...', icon: 'error' ,duration:1500 });
								setTimeout(() => {
									 uni.reLaunch({
										url: '/pages-others/verifyUserForm'
									 })
								}, 2000)
							}else{
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						}
					});
				},fail() {
					request.httpRequest(opts,that.loginData).then(res => {
						uni.hideLoading();
						if(res.data.code == 1){
							uni.setStorage({
								key:'userdata',
								data:res.data.data,
								success() {
									uni.showToast({ title: '跳转中...', icon: '/static/success.png' });
									let PageCur='index';
									uni.getStorage({
										key: 'PageCur',
										success: function (PageCurRes) {
											PageCur=PageCurRes.data
										}
									})
									setTimeout(() => {
										 uni.reLaunch({
											url: '/pages/index/tabbar?PageCur='+PageCur+'&qrcodeid='+that.qrcodeid
										 });
									}, 0)
								}
							})
						}
						else{
							uni.hideLoading();
							
							if(res.data.code == 267){
								uni.showToast({ title: '账号审核中...', icon: 'error' ,duration:1500 });
								setTimeout(() => {
									 uni.reLaunch({
									 	url: '/pages-others/verifyUserForm'
									 })
								}, 2000)
							}else{
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						}
					});
				}
			});
		}
	}
};
</script>
<style>
.img-a {
	position: absolute;
	width: 100%;
	top: -150rpx;
	right: 0;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	/* margin-bottom: -200rpx; */
}
.t-login {
	width: 650rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login .loginButton {
	font-size: 28rpx;
	background: #5677fc;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}
.t-login .wxloginButton {
	margin-top: 30rpx;
	font-size: 28rpx;
	border: 1rpx solid #5677fc;
	//background: #5677fc;
	color: #5677fc;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	/* border-right: 2rpx solid #dedede; */
	margin-right: 20rpx;
}
.t-login .t-a .line{
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #000;
	padding: 300rpx 0 30rpx 0;
	font-weight: bold;
}
.t-login .t-b2 {
	text-align: left;
	font-size: 32rpx;
	color: #aaaaaa;
	padding: 0rpx 0 120rpx 0;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	position: absolute;
	width: 80rpx;
	height: 80rpx;
	margin-left: 50%;
	left:-40rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #000;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
.t-b-saomax{
	width: 100%;
	text-align: center;
	z-index: 99999;
	color: dodgerblue;
	font-size: 16px;
	font-weight: 400;
	margin-top: 50px;
}
</style>
